<template>
	<view class="counter">
		<!-- <Header @back="back" left-icon="back" left-text="" right-text="" title="收银台" :bottom="true"></Header> -->
		<view class='head'>
			<view class="title">
				<text class="font-weight fz14">在线支付：</text>
				<text class="fz16" style="color:#ff4d1d ;">
					￥{{orderData.payAmount}}
				</text>
			</view>
			<view style="margin-top: 10upx;">
				<!-- <text class="fz14">温馨提示:</text> -->
				<view style="display: flex;align-items: center;">
					<text class="fz14" style="color: #666666;">剩余支付时间：</text>
					<uni-countdown class="fz14" :color="'#ff4d1d'" :splitor-color="'#ff4d1d'" :show-day="false" :hour="0" :minute="30" :second="0" ></uni-countdown>
				</view>	
				<view style="margin-top: 10upx;">
					<text style="color:#FF4D1D" class="fz14">30分钟内未支付的订单将自动取消，请您尽快支付</text>
				</view>
			</view>
		</view>
		<!-- <view class="discount">
			<view class="left">
				<text class="font-weight fz16">优惠券</text>
			</view>

			<view class="right">
				<text class="fz15">暂无优惠券</text>
				<text class="fz15 iconfont icon-right"></text>
			</view>
		</view> -->
		<view class="pay-type">
			<view class="left">
				<text style="color: #16BF5A; font-size: 42upx;" class=" iconfont icon-weixin5"></text>
				<text class="fz16">微信支付</text>
			</view>
			<view class="right">
				<text style="color: #ff4d1d; font-size: 42upx;" class="iconfont icon-check-circle-fill"></text>
			</view>
		</view>

		<view class="foot-bar">

			<view class="bottom-left">
				<text class="moneyTxt fz18">应付：</text>
				<text class="money fz19">￥{{orderData.payAmount}}</text>
			</view>

			<view class="bottom-right fz19  submit" @click="newSubmit">确认支付</view>

		</view>
		<!-- <view class="counterPay">
				<text style="color: #16BF5A;font-size: 42upx;" class="iconfont icon-weixin5"></text>
				
				<view class="">
					微信支付
					
				</view>
				<view class="counterSubmit" @click="counterSubmit">
				<text class="moneyTxt">立即支付</text>
				<text class="money">￥{{parentDate.orderPrice}}</text>
			</view>
		</view> -->

	</view>
</template>

<script>
	import Header from '@/components/header.vue';
	import uniCountdown from "@/components/uni-countdown/uni-countdown.vue";
	export default {
		onLoad: function(option) {
			console.log()
			this.orderData = JSON.parse(option.data);
			this.ids = this.orderData.orderId
			// if (option.data.bustypes && option.data.bustypes == 1) {
			// 	this.bustype = '1'
			// } else {
			// 	this.bustype = this.orderData.bustype
			// }
			this.bustype = '3'

			console.log("支付订单传过来的数据----------->", this.orderData);
			// if (this.orderData.type === '0') {
			// 	this.orderData.orderPrice = this.orderData.ticketPrice * this.parentDate.ticketNum
			// }else if(this.parentDate.type === '1'){
			// 	// this.parentDate.orderPrice = 
			// }else{
			// 	this.parentDate.orderPrice = this.parentDate.totalPrice;
			// }
			// this.getCode();
		},
		data() {
			return {
				orderData: {},
				resDate: '',
				orderList: [],
				ids: '',
				bustype: ''
			}
		},
		components: {
			Header,
			uniCountdown
		},
		onShow() {
			//#ifdef H5
			document.title = '收银台'
			//#endif
		},
		methods: {
			newSubmit() {
				var that = this;
				uni.showLoading({
					title: '加载中'
				});
				var params = {
					id: this.ids,
					bustype: this.bustype,
					openid: this.pub.getUserInfo().openid
				}
				this.$postApi(this.$path.PAY_ORDER_NEW, params).then(res => {
					uni.hideLoading()
					console.log("支付前准备数据返回--------------------->", res)
					if (res.data.err_code == "1111") {
						let pay_data = res.data
						// #ifdef  H5
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								"appId": pay_data.appId, //公众号名称，由商户传入     
								"timeStamp": pay_data.timeStamp, //时间戳，自1970年以来的秒数     
								"nonceStr": pay_data.nonceStr, //随机串     
								"package": pay_data.package,
								"signType": pay_data.signType, //微信签名方式：     
								"paySign": pay_data.paySign //微信签名 
							},
							function(res) {
								if (res.err_msg == "get_brand_wcpay_request:ok") {
									// 使用以上方式判断前端返回,微信团队郑重提示：
									//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
									// console.log('支付成功！')
									// alert('支付成功')
									// this.noticeBack();
									// uni.showLoading({
									// 	title: '加载中'
									// });
														
									uni.redirectTo({
										url: '/pages/order/paySuccess?item=' + that.ids + "&type= 0",
										animationType: 'pop-in',
										animationDuration: 200
									})
								} else {
									// uni.showModal({
									// 	content:JSON.stringify(res)
									// })
									uni.showToast({
										title: '取消支付',
										icon: 'none',
										duration: 3000
									})
								}
							});
						// #endif
						//#ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							"timeStamp": pay_data.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": pay_data.nonceStr, //随机串     
							"package": pay_data.package,
							"signType": pay_data.signType, //微信签名方式：     
							"paySign": pay_data.paySign, //微信签名 
							success: function(res) {
								console.log("支付成功返回数据--------------->", res)
								uni.hideLoading()
								if (res.errMsg == "requestPayment:ok") {
									uni.showLoading({
										title: '加载中'
									});
						
									uni.redirectTo({
										url: '/pages/order/paySuccess?item=' + that.ids + "&type= 0",
										animationType: 'pop-in',
										animationDuration: 200
									})
						
								} else if (res.errMsg === "requestPayment:failcancel" || res.errMsg === "get_brand_wcpay_request:cancel") {
									uni.showToast({
										title: "支付取消",
										icon: "none",
										duration: 3000
									})
								} else {
									uni.showToast({
										title: "支付失败：" + res.errMsg,
										icon: "none",
										duration: 3000
									})
								}
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								uni.hideLoading();
								let errors = err.errMsg.toString().replace(/\s+/g, "");
								if (errors === "requestPayment:failcancel" || errors === "get_brand_wcpay_request:cancel") {
									uni.showToast({
										title: "支付取消",
										icon: "none",
										duration: 3000
									})
									return;
								}
						
								uni.showToast({
									title: "支付失败：" + JSON.stringify(err),
									icon: "none",
									duration: 3000
								})
								console.log('fail:' + JSON.stringify(err));
							}
						})
						//#endif
						
					} else {
						this.pub.showError(res.data.msg)
					}
				})
			},

			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			onBridgeReady() {
				let that = this;
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": this.resDate.appid, //公众号名称，由商户传入     
						"timeStamp": this.resDate.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": this.resDate.nonceStr, //随机串     
						"package": this.resDate.package,
						"signType": "MD5", //微信签名方式：     
						"paySign": this.resDate.paySign //微信签名 
					},
					function(res) {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							// console.log('支付成功！')
							// alert('支付成功')
							// this.noticeBack();
							uni.showLoading({
								title: '加载中'
							});
							that.$postApi(that.$path.WX_PAY_Notification, {
								"orderId": that.parentDate.orderId
							}).then(data => {
								if (data.data.success) {
									uni.redirectTo({
										url: '/pages/order/paySuccess?item=' + that.parentDate.orderId + "&type=" + that.parentDate.type,
										animationType: 'pop-in',
										animationDuration: 200
									})
									// let account = that.pub.getAccount();
									// that.$postApi(that.$path.GETSCENICSPOT_ORDERLIST, {
									// 	page: that.page,
									// 	rows: 10,
									// 	parentId: that.parentDate.orderId,
									// 	unionId: account
									// }).then(data => {
									// 	// console.log(data)
									// 	if (data.data.success) {
									// 	
									// 		// if (data.data.rows.length !== 0) {
									// 		// 	for (let i = 0; i < data.data.rows.length; i++) {
									// 		// 		data.data.rows[i].hostImg = that.pub.fmtImgUrl(data.data.rows[i].hostImg);
									// 		// 	}
									// 		// 	that.orderList = data.data.rows
									// 		// 	uni.redirectTo({
									// 		// 		url: '/pages/scenicOrder/scenicDetail?item=' + encodeURIComponent(JSON.stringify(that.orderList[0])),
									// 		// 		animationType: 'pop-in',
									// 		// 		animationDuration: 200
									// 		// 	});
									// 		// 	uni.hideLoading();
									// 		// }
									// 	}
									// })
								}
							})
						} else {
							// uni.showModal({
							// 	content:JSON.stringify(res)
							// })
							uni.showToast({
								title: '取消支付',
								icon: 'none',
								duration: 3000
							})
						}
					});
			},
			counterSubmit() {
				//#ifdef H5
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
						document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
					}
				} else {
					if (this.resDate.appid == undefined) {
						setTimeout(function() {
							this.onBridgeReady();
						}, 2000)
					} else {
						this.onBridgeReady();
					}

				}
				//#endif

				//#ifndef H5
				var that = this;
				uni.showLoading({
					title: '加载中'
				});
				uni.requestPayment({
					provider: 'wxpay',
					"timeStamp": this.resDate.timeStamp, //时间戳，自1970年以来的秒数     
					"nonceStr": this.resDate.nonceStr, //随机串     
					"package": this.resDate.package,
					"signType": "MD5", //微信签名方式：     
					"paySign": this.resDate.paySign, //微信签名 
					success: function(res) {
						uni.hideLoading()
						if (res.errMsg == "requestPayment:ok") {
							uni.showLoading({
								title: '加载中'
							});
							that.$postApi(that.$path.WX_PAY_Notification, {
								"orderId": that.parentDate.orderId
							}).then(data => {
								if (data.data.success) {
									uni.redirectTo({
										url: '/pages/order/paySuccess?item=' + that.parentDate.orderId + "&type=" + that.parentDate.type,
										animationType: 'pop-in',
										animationDuration: 200
									})
									// let account = that.pub.getAccount();
									// that.$postApi(that.$path.GETSCENICSPOT_ORDERLIST, {
									// 	page: that.page,
									// 	rows: 1,
									// 	parentId: that.parentDate.orderId,
									// 	unionId: account
									// }).then(data => {
									// 	if (data.data.success) {
									// 		if (data.data.rows.length !== 0) {
									// 			for (let i = 0; i < data.data.rows.length; i++) {
									// 				data.data.rows[i].hostImg = that.pub.fmtImgUrl(data.data.rows[i].hostImg);
									// 			}
									// 			that.orderList = data.data.rows;
									// 			uni.navigateTo({
									// 				url:'/pages/order/paySuccess?item=' + that.parentDate.orderId,
									// 				animationType: 'pop-in',
									// 				animationDuration: 200
									// 			})
									// 			// uni.redirectTo({
									// 			// 	url: '/pages/scenicOrder/scenicDetail?item=' + encodeURIComponent(JSON.stringify(that.orderList[0])),
									// 			// 	animationType: 'pop-in',
									// 			// 	animationDuration: 200
									// 			// });
									// 			uni.hideLoading();
									// 		}
									// 	}
									// })
								}
							})
						} else if (res.errMsg === "requestPayment:failcancel" || res.errMsg === "get_brand_wcpay_request:cancel") {
							uni.showToast({
								title: "支付取消",
								icon: "none",
								duration: 3000
							})
						} else {
							uni.showToast({
								title: "支付失败：" + res.errMsg,
								icon: "none",
								duration: 3000
							})
						}
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						uni.hideLoading();
						let errors = err.errMsg.toString().replace(/\s+/g, "");
						if (errors === "requestPayment:failcancel" || errors === "get_brand_wcpay_request:cancel") {
							uni.showToast({
								title: "支付取消",
								icon: "none",
								duration: 3000
							})
							return;
						}

						uni.showToast({
							title: "支付失败：" + JSON.stringify(err),
							icon: "none",
							duration: 3000
						})
						console.log('fail:' + JSON.stringify(err));
					}
				})
				//#endif

			},
			noticeBack() {
				// alert('11')

			},
			getCode() {

				var openid = this.pub.getOpenid();
				var appid = this.pub.getAppid();
				var secret = this.pub.getSecret();

				// #ifdef H5
				var origin = this.pub.getOrigin();
				let type = 3; //3为AI游甘肃
				if (origin && origin == "wygs") {
					type = 4; //4为微游甘肃
				}
				var data = {
					openid: openid, //要去换取openid的登录凭证
					// appid: appid,//不传，通过type在后台服务器判断
					type: type,
					body: this.parentDate.name,
					orderId: this.parentDate.orderId,
					total_fee: this.parentDate.orderPrice * 100,
					parentOrderId: this.parentDate.parentOrderId,
					attach: {
						A: 'a',
						B: 'b'
					}
				}
				// this.$postApi(this.$path.WX_PAY_BYOPENID, data).then(data => {//这个接口需要直接传appid
				this.$postApi(this.$path.WX_PAY_BYOPENID_WITH_TYPE, data).then(data => {
					if (data && data.statusCode && data.statusCode == 200) {
						this.resDate = data.data
					} else {
						uni.showModal({
							content: '支付失败，请重试！',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.navigateBack()
								}
							}
						})
					}
				})
				// #endif
				//#ifndef H5
				var that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						var data = {
							code: loginRes.code, //要去换取openid的登录凭证
							appid: appid,
							secret: secret,
							body: that.parentDate.name,
							orderId: that.parentDate.orderId,
							total_fee: that.parentDate.orderPrice * 100,
							type: 2,
							parentOrderId: that.parentDate.parentOrderId,
							attach: {
								A: 'a',
								B: 'b'
							}
						}
						that.$postApi(that.$path.WX_PAY, data).then(data => {
							// console.log(data)
							if (data && data.statusCode && data.statusCode == 200) {
								this.resDate = data.data
							} else {
								uni.showModal({
									content: '支付失败，请重试！',
									showCancel: false,
									success: res => {
										if (res.confirm) {
											uni.navigateBack()
										}
									}
								})
							}
							// that.resDate = data.data
							console.log(that.resDate)
						})
					}
				});


				//#endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,
	uni-page-refresh {
		height: 100% !important;
	}

	.counter {
		font-size: 26upx;
		background: #F5F5F5;
		padding: 12upx;
		height: 100%;

		.head {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 40upx;
			background: #fff;
			height: 200upx;
		}

		.discount {
			margin-top: 20upx;
			display: flex;
			flex-direction: row;
			background: #fff;
			justify-content: space-between;
			padding: 40upx;

			.right {
				color: #666666;
			}
		}

		.pay-type {
			margin-top: 20upx;
			display: flex;
			flex-direction: row;
			background: #fff;
			justify-content: space-between;
			padding: 40upx;

			.left {
				display: flex;
				// padding-left: 20upx;
				// flex-direction: column;
				justify-content: center;

				text {
					padding-right: 10upx;
				}
			}
		}

		.foot-bar {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			position: fixed;
			width: 100%;
			bottom: 0;
			height: 108upx;
			background: #fff;
		}

		.bottom-left {
			display: flex;
			// justify-content: center;
			// margin-left: 70upx;
			align-items: center;
			width: 50%;

			.money {
				font-size: 36upx;
				color: #FE5A34;
			}

			margin-left: 50upx;
		}

		.bottom-right {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50%;
			// height: 108upx;
			background: linear-gradient(left, #fa643d, #ff504f);
			color: #fff;
			height: 100%;
			padding: 20upx;
			text-align: center;
		}
	}
</style>
